<template>
  <div class="department-container" style="user-select: none;">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <svg-icon icon-class="zf" /><span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span>
                    操作<i class="el-icon-arrow-down" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="hShowAdd('')">添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 主体部分 -->
        <el-tree :data="list" default-expand-all>
          <template v-slot="{data}">
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width:100%">
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span>
                        操作<i class="el-icon-arrow-down" />
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hShowAdd(data.id)">添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="hShowEdit(data.id)">编辑</el-dropdown-item>
                        <el-dropdown-item v-if="data.children.length===0 ? true : false" @click.native="hDel(data.id)">删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree></el-card>

    </div>
    <el-dialog
      title="添加"
      :visible.sync="showDialog"
      width="50%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <add-or-edit v-if="showDialog" :id="childrenId" :origin-list="originList" :is-edit="isEdit" @close="hCancel" @succeess="hSuccess" />
    </el-dialog>
    <!-- 当封装相同业务的组件时， 很容易碰到数据残留的 bug ， 主要原因是 dialog 隐藏没有销毁子组件， 导致数据残留 -->
    <!-- 解决方案：
     1. 使用 v-if 人为的让组件销毁创建（最推荐 ， 无 bug ， 用户体验好，性能略弱）
     2. 随着 dialog 显示隐藏 ， 手动调用子组件的方法，重新加载数据（不是特别推荐， 有 bug ，需要再次解决， 用户体验好，性能强）
        $refs 获取原生 dom 对象或子组件对象，获取子组件对象后可以调用组件的方法，可以访问组件的属性
     3. 在子组件中 watch 监听 ID 的变化 ，不建议使用-->
    <el-dialog
      title="编辑"
      :visible.sync="showEditDialog"
      width="50%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <!-- <add-or-edit :id="childrenId" ref="deptDialog" :is-edit="isEdit" @succeess="hSuccess" /> -->
      <add-or-edit v-if="showEditDialog" :id="childrenId" :origin-list="originList" :is-edit="isEdit" @close="hCancel" @succeess="hSuccess" />
    </el-dialog>

  </div>
</template>
<script>
import { tranListToTreeData } from '@/utils/index'
import addOrEdit from './deptDialog.vue'
import { deleteDepartmentById, getDepartmentList } from '@/api/departments'
export default {
  components: {
    addOrEdit
  },
  data() {
    return {
      list: [],
      showDialog: false,
      childrenId: '',
      isEdit: false,
      showEditDialog: false,
      originList: [] // 源数据
    }
  },
  // 挂载
  created() {
    this.loadDepartments()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    // 渲染页面信息
    async loadDepartments() {
      const res = await getDepartmentList()
      // console.log(res.data.depts)
      res.data.depts.shift()
      // this.originList = res.data.depts.map(item => {
      //   return {
      //     id: item.id, pid: item.pid, name: item.name, code: item.code
      //   }
      // })
      // 高级写法
      this.originList = res.data.depts.map(({ id, pid, name, code }) => ({ id, pid, name, code }))
      // 调用 utils 里面的 方法
      this.list = tranListToTreeData(res.data.depts)
    },
    // 添加部门
    hShowAdd(id) {
      this.showDialog = true
      this.childrenId = id
      this.isEdit = false
    },
    // 自定义方法  子传父
    hSuccess() {
      // 关闭 dialog
      this.showDialog = false
      this.showEditDialog = false
      this.loadDepartments()
    },
    // 编辑部门
    hShowEdit(id) {
      this.showEditDialog = true
      this.childrenId = id
      // 将状态修为  编辑
      this.isEdit = true
      // 调用子组件的方法获取数据
      // 原因： 数据修改后， DOM 更新是异步的
      // this.$nextTick(() => { // 等待下一次 DOM 更新后执行
      //   this.$refs.deptDialog.loadDepartmentDetail()
      // })
    },
    // 删除部门
    hDel(id) {
      // console.log(id)
      this.$confirm('真的要删除吗?嘤嘤嘤', '提示', {
        type: 'warning'
      })
        .then(async() => {
          try {
            const res = await deleteDepartmentById(id)
            // 结果提醒用户
            this.$message.success(res.message)
            // 重新渲染页面
            this.loadDepartments()
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {

        })
    },
    hCancel() {
      this.showEditDialog = false
      this.showDialog = false
    }
  }
}
</script>
